<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加报修</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../css/mui.min.css">
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
    <style>
        * { touch-action: none; }
        .mui-card .mui-control-content {
            padding: 10px;
        }
        /*自定义样式*/
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        a{
            color: #ffffff;
        }
        .mui-content{
            width: 100%;
            height: 100%;
            background: #ffffff;
        }
        .mui-bar{
            background:#4F77AA ;
            color: #ffffff;
            -webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
            box-shadow: 0 0 1px rgba(0,0,0,0);
        }
        .mui-title{
            color: #ffffff;
        }
        .content_item{
            width: 100%;
            height: calc(100% - 52px);
        }
        .content_item .mui-control-content{
            width: 100%;
            height: calc(100% - 48px);
        }

        .mui-segmented-control{
            width: 50%;
            margin-left: 25%;
            border: 1px solid #4F77AA;
            border-radius: 15px;
        }
        .mui-segmented-control .mui-control-item{
            line-height: 30px;
        }
        .mui-segmented-control .mui-control-item1{
            border-radius: 15px 0 0 15px;
        }
        .mui-segmented-control .mui-control-item2{
            border-radius: 0px 15px 15px 0px;
        }
        .mui-segmented-control .mui-control-item.mui-active{
            background: #4F77AA;
        }
        .mui-segmented-control .mui-control-item{
            border-color:#4F77AA;
            border-left: 1px solid #4F77AA;
            color: #4F77AA;
        }
        .mui-media-object i{
            font-size: 36px;
            color: #999999;
            position: relative;
            top:20px;
        }
        .mui-table-view .mui-media-object.mui-pull-left{
            margin-right: 20px;
        }
        .mui-table-view .mui-media-object{
            width: 36px;
            height: 36px;
            line-height: 36px;
        }
        .mui-media-runbutton{
            text-align: center;
            border-radius: 50% 50%;
            margin-top: 20px;
        }
        .mui-media-runbutton span{
            color: #FFFFFF;
            font-size: 12px;
        }
        .color-primary{
            background: #1ab394;
        }
        .color-success {
            background: #1c84c6;
        }
        .color-info {
            background: #23c6c8;
        }
        .color-warning {
            background: #f8ac59;
        }
        .mui-media-body span.date{
            color:#f8ac59 ;
        }
        .mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
            width: 55%;
            float:left;
        }
        form span.icon{
            float: right;
            padding-right: 5%;
            padding-top: 10px;
        }
        .line_x{
            width:100%;
            height:8px;
            background: #EFEFF4;
        }
        form .textarea{
            border: 1px solid #dddddd;
              float: right;
            margin-top: 10px;
         /*   width: 55%;
          
            margin-right: 10%;*/
        }
        .mui-input-group:after{
            background: rgba(0,0,0,0);
        }
        .bottom_submit {
            position: absolute;
            width: 100%;
            height: 48px;
            text-align: center;
            line-height: 48px;
            bottom: 0;
            background: #4F77AA;
            z-index: 2;
        }
        input[type=button]#submit {
            width: 100%;
            height: 48px;
            line-height: 48px;
            background: #4F77AA;
            border: none;
            padding: 0;
            color: #ffffff;
        }
    
        .clear{
            clear: both;
        }
        select.mui-h5{
            font-size: 18px;
        }
        .mui-input-group:before{
            background: #ffffff;
        }


        /*语音样式*/
        .mui-input-row .mui-input-clear~.mui-icon-clear.mui-hidden~.mui-icon-speech{
            font-size: 20px;
            position: absolute;
            z-index: 1;
            right: 0;
            width: 38px;
            height: 55px;
            line-height: 55px;
            text-align: center;
            color: #999;
        }



        .blackBoxSpeak {
            width: 176px;
            height: 176px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background: url("../img/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
            url("../img/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;

            background: rgba(0, 0, 0, .7);
            display: none;
            border-radius: 12px;
            z-index: 5!important;
        }

        .blackBoxSpeakConent {
            font: 14.4px '微软雅黑 Light';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 12px;
            display: block;
            text-align: center;
            width: 90%;
            padding: 8px 0;
            margin: auto;
            color: #ffffff;
            font-weight: 200;
            border-radius: 4px;
        }

        .blackBoxPause {
            width: 176px;
            height: 176px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background: url("../img/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
            url("../img/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;

            background: rgba(0, 0, 0, .7);
            display: none;
            border-radius: 12px;
        }

        .blackBoxPauseContent {
            font: 14.4px '微软雅黑 Light';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 12px;
            display: block;
            text-align: center;
            width: 90%;
            padding: 8px 0;
            margin: auto;
            color: #ffffff;
            font-weight: 200;
            border-radius: 4px;
        }
        /*录音2动画*/
        .blackBoxSpeak1 {
            width: 176px;
            height: 176px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background: url("../img/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
            url("../img/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;
            background: rgba(0, 0, 0, .7);
            display: none;
            border-radius: 12px;
            z-index: 5!important;
        }
        #photo1,#photo{
            position: relative;
            z-index: 3!important;
        }

        .blackBoxSpeakConent1 {
            font: 14.4px '微软雅黑 Light';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 12px;
            display: block;
            text-align: center;
            width: 90%;
            padding: 8px 0;
            margin: auto;
            color: #ffffff;
            font-weight: 200;
            border-radius: 4px;
        }

        .blackBoxPause1 {
            width: 176px;
            height: 176px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background: url("../img/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
            url("../img/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;

            background: rgba(0, 0, 0, .7);
            display: none;
            border-radius: 12px;
        }

        .blackBoxPauseContent1 {
            font: 14.4px '微软雅黑 Light';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 12px;
            display: block;
            text-align: center;
            width: 90%;
            padding: 8px 0;
            margin: auto;
            color: #ffffff;
            font-weight: 200;
            border-radius: 4px;
        }
        /*播放语音时的动画*/
        @keyframes yuying{
            0%{
                height: 0%;
            }
            20%{
                height: 50%;
            }
            50%{
                height: 90%;
            }
            80%{
                height: 50%;
            }
            100%{
                height: 0%;
            }
        }

        .dialog-container{
            width: 60px;
            height: 25px;
            background: #efefef;
            border: 1px solid #0094de;
            border-radius: 5px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            position: absolute;top:5px;left:70px;
        }
        .dialog-container .audio-animation{
            width: 30px;
            height: 20px;
        }
        .audioPlay .one{
            animation:yuying 0.6s infinite 0.15s;
            -webkit-animation:yuying 0.6s infinite 0.15s;
        }
        .audioPlay .two{
            animation:yuying 0.6s infinite 0.3s;
            -webkit-animation:yuying 0.6s infinite 0.3s;
        }
        .audioPlay .three{
            animation:yuying 0.6s infinite 0.45s;
            -webkit-animation:yuying 0.6s infinite 0.45s;
        }
        .audioPlay .four{
            animation:yuying 0.6s infinite 0.6s;
            -webkit-animation:yuying 0.6s infinite 0.6s;
        }

        .one,.two,.three,.four{
            width:2px;
            border-radius: 50px;
            background-color: #0094de;
            vertical-align: middle;
            display: inline-block;
        }
        .one{
            margin-left: 1px;
            height: 50%;
        }
        .two{
            height: 90%;
        }
        .three{
            height: 70%;
        }
        .four{
            height: 40%;
        }

        /*上传图片1样式*/
        #avatar{
            width:100%;
            margin: 0;
            padding: 0;
        }
        #avatar li{
            width: 25%;
            height: 60px;
            float: left;
            list-style: none;
            padding: 0px 5px;
            box-sizing: border-box;
            margin-top: 10px;
        }
        #avatar li img{
            display:inline-block;
            width: 100%;
            height: 100%;
        }
        /*上传图片2样式*/
        #avatar1{
            width:100%;
            margin: 0;
            padding: 0;
        }
        #avatar1 li{
            width: 25%;
            height: 60px;
            float: left;
            list-style: none;
            padding: 0px 5px;
            box-sizing: border-box;
            margin-top: 10px;
        }
        #avatar1 li img{
            display:inline-block;
            width: 100%;
            height: 100%;
        }
        .mui-input-row .mui-btn{
            width:28%;
            float: left;
            margin-right: 15px;
            padding: 6px 15px;
            margin-top: 6px;
            background: #4F77AA;
            color: #ffffff;
        }
        /*预览图片样式*/
        .mui-preview-image.mui-fullscreen {
            position: fixed;
            z-index: 20;
            background-color: #000;
        }
        .mui-preview-header,
        .mui-preview-footer {
            position: absolute;
            width: 100%;
            left: 0;
            z-index: 10;
        }
        .mui-preview-header {
            height: 44px;
            top: 0;
        }
        .mui-preview-footer {
            height: 50px;
            bottom: 0px;
        }
        .mui-preview-header .mui-preview-indicator {
            display: block;
            line-height: 25px;
            color: #fff;
            text-align: center;
            margin: 15px auto;
            width: 70px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 12px;
            font-size: 16px;
        }
        .mui-preview-image {
            display: none;
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        .mui-preview-image.mui-preview-in {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }
        .mui-preview-image.mui-preview-out {
            background: none;
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
        }
        .mui-preview-image.mui-preview-out .mui-preview-header,
        .mui-preview-image.mui-preview-out .mui-preview-footer {
            display: none;
        }
        .mui-zoom-scroller {
            position: absolute;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            -webkit-backface-visibility: hidden;
        }
        .mui-zoom {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .mui-slider .mui-slider-group .mui-slider-item img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
        .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
            width: 100%;
        }
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
            display: inline-table;
        }
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
            display: table-cell;
            vertical-align: middle;
        }
        .mui-preview-loading {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
        }
        .mui-preview-loading.mui-active {
            display: block;
        }
        .mui-preview-loading .mui-spinner-white {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
            height: 50px;
            width: 50px;
        }
        .mui-preview-image img.mui-transitioning {
            -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
            transition: transform 0.5s ease, opacity 0.5s ease;
        }
        @-webkit-keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @-webkit-keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        #avatar img {
            max-width: 100%;
            height: auto;
        }
        #avatar1 img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
    <h1 class="mui-title">添加报修</h1>
</header>
<div class="mui-content">
    <div style="padding: 10px 10px;">
        <div id="segmentedControl" class="mui-segmented-control">
            <span class="mui-control-item mui-control-item1 mui-active" onclick="toItem1()">有设备</span>
            <span class="mui-control-item mui-control-item2" onclick="toItem2()">无设备</span>
        </div>
    </div>
    <div class="content_item">

        <div id="item1" class="mui-control-content mui-active">
                <div id="scroll" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <form id="mainForm1" class="mui-input-group">
                            <div class="mui-input-row">
                                <label>报修标题：</label>
                                <input type="text" id="repairName1" value="" />
                            </div>
                            <div class="mui-input-row">
                                <label>报修分类：</label>
                                <input type="hidden" id="repairCategoryId1" value="" />
                                <input type="text" id="repairCategory1" value="" />
                            </div>
                            <div class="mui-input-row append">
                                <label>选择设备：</label>
                                <input type="text" id="deviceCode1"  onclick="choiceEquipment()">

                            </div>
                            <div class="mui-input-row">
                                <label>设备名称：</label>
                                <input type="hidden" id="haveNoDevice1" value="wu">
                                <input type="text"  id="deviceName1" placeholder="西安"/>
                            </div>
                            <div class="mui-input-row">
                                <label>设备位置：</label>
                                <input type="text" id="deviceSpace1" placeholder="西安"/>
                            </div>
                            <div class="mui-input-row">
                                <label>工单类型：</label>
                                <input type="hidden" id="workOrderTypeId1" placeholder="西安"/>
                                <input type="text" id="workOrderType1" placeholder="西安"/>
                            </div>
                            <!-- 语音录取和播放 -->
                            <div class="mui-input-row">
                                <label>语音报修:</label>
                                <input type="text" id="voice_long" class="mui-input-clear mui-input" placeholder="" disabled>
                                <input type="hidden" id="voice_path" >
                                <span class="mui-icon mui-icon-speech" id='microphone' style="margin-left:15%;"></span>
                                <div class="dialog-container" id='voice' style="display:none;margin-left:15%;">
                                    <div class="audio-animation">
                                        <div class="one"></div>
                                        <div class="two"></div>
                                        <div class="three"></div>
                                        <div class="four"></div>
                                    </div>
                                </div>

                            </div>
                            <!-- 中间黑框 录音状态-->
                            <div class="blackBoxSpeak">
                                <p class="blackBoxSpeakConent">手指上划，取消</p>
                            </div>

                            <!-- 中间黑框 暂停状态-->
                            <div class="blackBoxPause">
                                <p class="blackBoxPauseContent" style="background: red">松开手指， 取消</p>
                            </div>

                            <!--图片上传1-->
                            <div class="mui-input-row">
                                <label>图片上传：</label>
                                <button id='photo' type="button" class="mui-btn mui-btn-block">上传照片</button>
                                <!--<img class='picture' src='' data-preview-src="../img/no_img.jpg" data-preview-group="1" />-->
                            </div>
                            <div>
                                <ul id="avatar">

                                </ul>
                            </div>
                            <div class="clear"></div>
                            <div class="line_x" style=""></div>
                            <div class="" style="height:40px;padding: 10px 15px;">
                                <label>故障描述：</label>
                                <textarea class="textarea" id="repairContent1" rows="5" placeholder="故障描述"></textarea>
                            </div>
                            <div class="clear"></div>
                            <div class="" style="height:40px;padding: 10px 15px;">
                                <label>报修描述：</label>
                                <textarea class="textarea" id="repairDesc1" rows="5" placeholder="报修描述"></textarea>
                            </div>

                        </form>

                    </div>
                </div>
            </div>

        <div id="item2" class="mui-control-content">
            <div id="scroll1" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <form id="mainform2" class="mui-input-group">
                    <div class="mui-input-row">
                    <label>报修标题：</label>
                    <input type="text" id="repairName2" value="" />
                    </div>
                    <div class="mui-input-row">
                    <label>报修分类：</label>
                    <input type="hidden" id="repairCategoryId2" value="" />
                    <input type="text" id="repairCategory2" value="" />
                    </div>
                    <div class="mui-input-row">
                    <label>设备名称：</label>
                    <input type="hidden" id="haveNoDevice2" value="wu">
                    <input type="text"  id="deviceName2" placeholder="西安"/>
                    </div>
                    <div class="mui-input-row">
                    <label>设备位置：</label>
                    <input type="text" id="deviceSpace2" placeholder="西安"/>
                    </div>
                    <div class="mui-input-row">
                    <label>工单类型：</label>
                    <input type="hidden" id="workOrderTypeId2" placeholder="西安"/>
                    <input type="text" id="workOrderType2" placeholder="西安"/>
                    </div>
                        <!-- 语音录取和播放 -->
                        <div class="mui-input-row">
                            <label>语音报修2:</label>
                            <input type="text" id="voice_long1" class="mui-input-clear mui-input" placeholder="" disabled>
                            <input type="hidden" id="voice_path1" >
                            <span class="mui-icon mui-icon-speech" id='microphone1' style="margin-left:15%;"></span>
                            <div class="dialog-container" id='voice1' style="display:none;margin-left:15%;">
                                <div class="audio-animation">
                                    <div class="one"></div>
                                    <div class="two"></div>
                                    <div class="three"></div>
                                    <div class="four"></div>
                                </div>
                            </div>

                        </div>
                        <!-- 中间黑框 录音状态-->
                        <div class="blackBoxSpeak1">
                            <p class="blackBoxSpeakConent1">手指上划，取消</p>
                        </div>

                        <!-- 中间黑框 暂停状态-->
                        <div class="blackBoxPause1">
                            <p class="blackBoxPauseContent1" style="background: red">松开手指， 取消</p>
                        </div>
                        <!--图片上传2-->
                        <div class="mui-input-row">
                            <label>图片上传：</label>
                            <button id='photo1' type="button" class="mui-btn mui-btn-block">上传照片</button>
                            <!--<img class='picture' src='' data-preview-src="../img/no_img.jpg" data-preview-group="1" />-->
                        </div>
                        <div>
                            <ul id="avatar1">

                            </ul>
                        </div>
                        <div class="clear"></div>
                    <div class="line_x" style=""></div>
                    <div class="" style="height:40px;padding: 10px 15px;">
                    <label>故障描述：</label>
                    <textarea class="textarea" id="repairContent2" rows="5" placeholder="故障描述"></textarea>
                    </div>
                    <div class="clear"></div>
                    <div class="" style="height:40px;padding: 10px 15px;">
                    <label>报修描述：</label>
                    <textarea class="textarea" id="repairDesc2" rows="5" placeholder="报修描述"></textarea>
                    </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom_submit">
        <input type="button" value="提交" id="submit">
    </div>

</div>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../js/mui.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script src="../../script/api.js"></script>
<script>
    mui('body').on('tap','a',function(){
        window.top.location.href=this.href;
    });
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    //预览图片
    mui.previewImage();
    (function($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });
        $('#scroll1').scroll({
            indicators: true //是否显示滚动条
        });
        var start_time = $('#start_time')[0];
        var btns = $('.btn');
        btns.each(function(i, btn) {
            btn.addEventListener('tap', function() {
                var _self = this;
                if(_self.picker) {
                    _self.picker.show(function (rs) {
                        end_time.value=rs.text;
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                } else {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    /*
                     * 首次显示时实例化组件
                     * 示例为了简洁，将 options 放在了按钮的 dom 上
                     * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                     */
                    _self.picker = new $.DtPicker(options);
                    _self.picker.show(function(rs) {
                        /*
                         * rs.value 拼合后的 value
                         * rs.text 拼合后的 text
                         * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                         * rs.m 月，用法同年
                         * rs.d 日，用法同年
                         * rs.h 时，用法同年
                         * rs.i 分（minutes 的第二个字母），用法同年
                         */
                        start_time.value=rs.text;
                        // end_time.value=rs.text;
                        /*
                         * 返回 false 可以阻止选择框的关闭
                         * return false;
                         */
                        /*
                         * 释放组件资源，释放后将将不能再操作组件
                         * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                         * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                         * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                         */
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                }

            }, false);
        });
        var segmentedControl = document.getElementById('segmentedControl');
        $('.mui-input-group').on('change', 'input', function() {
            if (this.checked) {
                var styleEl = document.querySelector('input[name="style"]:checked');
                var colorEl = document.querySelector('input[name="color"]:checked');
                if (styleEl && colorEl) {
                    var style = styleEl.value;
                    var color = colorEl.value;
                    segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
                }
            }
        });
    })(mui);

    $(document).on("click","span.mui-pull-left",function(){
        window.location.href="../../index.html";
    })
//    提交报修
    $(document).on("click","#submit",function(){
        window.location.href="repair_slip.html";
    })
//判断有设备还是无设备
    function toItem1(){
        $("#item1").css("display","block");
        $("#item2").css("display","none");
        $("#item2 #repairName2").val("");
        $("#avatar").html("");
    }
    function toItem2(){
        $("#item2").css("display","block");
        $("#item1").css("display","none");
        $("#item1 #repairName1").val("");
        $("#avatar1").html("");
    }

//    选择设备
    function choiceEquipment(){
        window.location.href="equipment_list.html";
    }
    $(document).ready(function(){
        initRecordEvent1();
        //播放录音
        var voice=document.getElementById("voice");
        var voice1=document.getElementById("voice1");
        voice.onclick=function(){
            var path=document.getElementById("voice_path").value;
            openPlayer(path);
        };
        voice1.onclick=function(){
            var path=document.getElementById("voice_path1").value;
            openPlayer(path);
        };

    //    上传图片1
        var photo=document.getElementById("photo");
        photo.onclick=function(){
            showAction();
        };
    //    上传图片2
        var photo1=document.getElementById("photo1");
        photo1.onclick=function(){
            showAction();
        };
    })


    //录音2开始
    //开始录音
    function initRecordEvent1(){
        initStyle();
        setTimer();
        recordEvent();
        recordEvent1();
    }
    function recMp3Start(){
        var recMp3 = api.require('recMp3');
        recMp3.start(function(ret, err) {
            if (ret) {
                if(ret.db!=undefined){
                    // 在这里做ui 处理
                } else{
                    //打开成功，开始录音
                    // alert(ret.message);
                }


            } else {
                alert(err.message);
            }
        });
    }
    //结束录音
    function recMp3End(btnId){
        var recMp3 = api.require('recMp3');
        recMp3.stop( function(ret,err) {
            if(ret){
                //语音示例
                var duration = ret.duration;
                var path = ret.path;
                // alert(ret.message+", 时长："+duration+",路径："+path);
                if('microphone' == btnId){
                    document.getElementById("voice_path").value=path;
                    document.getElementById("voice_long").value=Duration(duration);
                    $("#voice_long").css("padding-left","80px");
                    $("#voice").css("display","block");
                }else if('microphone1' == btnId){
                    document.getElementById("voice_path1").value=path;
                    document.getElementById("voice_long1").value=Duration(duration);
                    $("#voice_long1").css("padding-left","80px");
                    $("#voice1").css("display","block");
                }
                $(".dialog-container .audio").append("<source src='"+path+"'/>");

            }
        });
    }

    //计算语音时长
    function Duration(time) {

        var theTime = parseInt(time);// 秒
        var middle= 0;// 分

        if(theTime > 60) {
            middle= parseInt(theTime/60);
            theTime = parseInt(theTime%60);
            if(middle> 60) {
                middle= parseInt(middle%60);
            }
        }
        var result="";
        if(0 != theTime){
            result = ""+parseInt(theTime)+"″";
        }
        if(middle > 0) {
            result = ""+parseInt(middle)+"′"+result;
        }
        return result;
    }
    //按钮事件
    function recordEvent() {
        var bt_recoding = document.getElementById("microphone");
        //手指移动相关
        var posStart = 0;//初始化起点坐标
        var posEnd = 0;//初始化终点坐标
        var posMove = 0;//初始化滑动坐标

        bt_recoding.addEventListener("touchstart", function (event) {
            event.preventDefault();//阻止浏览器默认行为
            posStart = 0;
            posStart = event.touches[0].pageY;//获取起点坐标

            //显示录音 隐藏暂停
            showBlackBoxSpeak();
            recMp3Start();
        });
        bt_recoding.addEventListener("touchmove", function (event) {
            event.preventDefault();//阻止浏览器默认行为

            posMove = event.targetTouches[0].pageY;//获取滑动实时坐标
            if (posStart - posMove < 200) {
                //隐藏录音 显示暂停
                showBlackBoxSpeak();
                // recMp3End();
                //document.getElementById("speech").value="";//没有取消录音的方法,这里将path置空
            } else {
                //显示录音 隐藏暂停
                showBlackBoxPause();
            }
        });
        bt_recoding.addEventListener("touchend", function (event) {
            event.preventDefault(); //阻止浏览器默认行为
            posEnd = 0;
            posEnd = event.changedTouches[0].pageY;//获取终点坐标

            //初始化状态
            initStatus();
            recMp3End("microphone");
            if (posStart - posEnd < 200) {
                //alert("成功");
                showBlackBoxNone();
            } else {
                // alert("发送");
                showBlackBoxNone();
            }
        });
    }
    //同一页面第二个
    function recordEvent1() {
        var bt_recoding1 = document.getElementById("microphone1");
        //手指移动相关
        var posStart = 0;//初始化起点坐标
        var posEnd = 0;//初始化终点坐标
        var posMove = 0;//初始化滑动坐标

        bt_recoding1.addEventListener("touchstart", function (event) {
            event.preventDefault();//阻止浏览器默认行为
            posStart = 0;
            posStart = event.touches[0].pageY;//获取起点坐标

            //显示录音 隐藏暂停
            showBlackBoxSpeak();
            recMp3Start();
        });
        bt_recoding1.addEventListener("touchmove", function (event) {
            event.preventDefault();//阻止浏览器默认行为

            posMove = event.targetTouches[0].pageY;//获取滑动实时坐标
            if (posStart - posMove < 200) {
                //隐藏录音 显示暂停
                showBlackBoxSpeak();
                // recMp3End();
                //document.getElementById("speech").value="";//没有取消录音的方法,这里将path置空
            } else {
                //显示录音 隐藏暂停
                showBlackBoxPause();
            }
        });
        bt_recoding1.addEventListener("touchend", function (event) {
            event.preventDefault(); //阻止浏览器默认行为
            posEnd = 0;
            posEnd = event.changedTouches[0].pageY;//获取终点坐标

            //初始化状态
            initStatus();
            recMp3End("microphone1");
            if (posStart - posEnd < 200) {
                //alert("成功");
                showBlackBoxNone();
            } else {
                // alert("发送");
                showBlackBoxNone();
            }
        });
    }

    //轮播
    function setTimer() {
        //轮播相关
        var index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        var num = index.length;
        var blackBoxSpeak = document.querySelector(".blackBoxSpeak");
        var blackBoxSpeak1 = document.querySelector(".blackBoxSpeak1");
        var timer = setInterval(function () {
            setTimeout(function () {
                num++;
                blackBoxSpeak.style.background = "url('../img/ic_record@2x.png')no-repeat 28px 16px/64px 104px, url('../img/ic_record_ripple@2x-" + index[num] + ".png')no-repeat 111.2px 32px/28.8px 88px";
                blackBoxSpeak.style.backgroundColor = " rgba(0,0,0,.7)";

                blackBoxSpeak1.style.background = "url('../img/ic_record@2x.png')no-repeat 28px 16px/64px 104px, url('../img/ic_record_ripple@2x-" + index[num] + ".png')no-repeat 111.2px 32px/28.8px 88px";
                blackBoxSpeak1.style.backgroundColor = " rgba(0,0,0,.7)";
            }, 70);
            if (num >= index.length - 1) {
                num = 0;
            }
        }, 70);
    }
    function initStyle(){

//中间黑色边框和里面的内容（录音状态）
        var blackBoxSpeak = document.querySelector(".blackBoxSpeak");
        blackBoxSpeak.style.background = "url('../img/ic_record@2x.png')no-repeat 28 16px/65px 104px, url('../img/ic_record_ripple@2x-9.png')no-repeat 111.2px 32px/28.8px 88px";
        blackBoxSpeak.style.backgroundColor = "rgba(0,0,0,.7)";

//中间黑色边框和里面的内容（暂停状态）
        var blackBoxPause = document.querySelector(".blackBoxPause");
        blackBoxPause.style.background = "rgba(0,0,0,.7) url('../img/ic_release_to_cancel@2x.png')no-repeat center 8px/67.2px 104px";
        blackBoxPause.style.backgroundColor = "rgba(0,0,0,.7)";

        //中间黑色边框和里面的内容（录音状态）
        var blackBoxSpeak1 = document.querySelector(".blackBoxSpeak1");
        blackBoxSpeak1.style.background = "url('../img/ic_record@2x.png')no-repeat 28 16px/65px 104px, url('../img/ic_record_ripple@2x-9.png')no-repeat 111.2px 32px/28.8px 88px";
        blackBoxSpeak1.style.backgroundColor = "rgba(0,0,0,.7)";

//中间黑色边框和里面的内容（暂停状态）
        var blackBoxPause1 = document.querySelector(".blackBoxPause1");
        blackBoxPause1.style.background = "rgba(0,0,0,.7) url('../img/ic_release_to_cancel@2x.png')no-repeat center 8px/67.2px 104px";
        blackBoxPause1.style.backgroundColor = "rgba(0,0,0,.7)";
    }
    //初始化状态
    function initStatus() {
        // bt_recoding.value = '按住 说话';

        //全部隐藏
        showBlackBoxNone();
    }


    //显示录音 隐藏暂停
    function showBlackBoxSpeak() {
        var blackBoxSpeak = document.querySelector(".blackBoxSpeak");
        var blackBoxPause = document.querySelector(".blackBoxPause");
        blackBoxSpeak.style.display = "block";
        blackBoxPause.style.display = "none";
        var blackBoxSpeak1 = document.querySelector(".blackBoxSpeak1");
        var blackBoxPause1 = document.querySelector(".blackBoxPause1");
        blackBoxSpeak1.style.display = "block";
        blackBoxPause1.style.display = "none";
    }

    //隐藏录音 显示暂停
    function showBlackBoxPause() {
        var blackBoxSpeak = document.querySelector(".blackBoxSpeak");
        var blackBoxPause = document.querySelector(".blackBoxPause");
        blackBoxSpeak.style.display = "none";
        blackBoxPause.style.display = "block";
        var blackBoxSpeak1 = document.querySelector(".blackBoxSpeak1");
        var blackBoxPause1 = document.querySelector(".blackBoxPause1");
        blackBoxSpeak1.style.display = "none";
        blackBoxPause1.style.display = "block";
    }

    //隐藏录音
    function showBlackBoxNone() {
        var blackBoxSpeak = document.querySelector(".blackBoxSpeak");
        var blackBoxPause = document.querySelector(".blackBoxPause");
        blackBoxSpeak.style.display = "none";
        blackBoxPause.style.display = "none";
        var blackBoxSpeak1 = document.querySelector(".blackBoxSpeak1");
        var blackBoxPause1 = document.querySelector(".blackBoxPause1");
        blackBoxSpeak1.style.display = "none";
        blackBoxPause1.style.display = "none";
    }
//    录音2结束
</script>

</body>

</html>